<!DOCTYPE html>
<html>
<head>
  <title>Settings</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/popup.css">
</head>
<body>
  <h2>Settings</h2>
  
  <!-- Tab navigation -->
  <div class="tab-container">
    <div class="tab-buttons">
      <button class="tab-button active" data-tab="url-config">URL Configuration</button>
      <button class="tab-button" data-tab="banner-config">Banner Configuration</button>
      <button class="tab-button" data-tab="settings">Settings</button>
    </div>
    
    <!-- Tab content -->
    <div class="tab-content">
      <!-- URL Configuration Tab -->
      <div id="url-config" class="tab-pane active">
        <table id="urlSettingsTable">
          <thead>
            <tr>
              <th>URL Pattern</th>
              <th>Warning Text</th>
              <th>BG Color</th>
              <th>Text Color</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody id="urlSettings">
            <!-- URL settings will be dynamically added here -->
          </tbody>
        </table>
        <div class="button-container">
          <button id="addUrlButton" class="add-url-button">Add URL</button>
        </div>
      </div>
      
      <!-- Banner Configuration Tab -->
      <div id="banner-config" class="tab-pane">
        <h3>Banner Position</h3>
        <div class="position-options-grid">
          <label class="radio-grid-option">
            <input type="radio" name="bannerPosition" value="top-left">
            <div class="position-label">Top Left</div>
          </label>
          <label class="radio-grid-option">
            <input type="radio" name="bannerPosition" value="top-center">
            <div class="position-label">Top Center</div>
          </label>
          <label class="radio-grid-option">
            <input type="radio" name="bannerPosition" value="top-right" checked>
            <div class="position-label">Top Right</div>
          </label>
          <label class="radio-grid-option">
            <input type="radio" name="bannerPosition" value="bottom-left">
            <div class="position-label">Bottom Left</div>
          </label>
          <label class="radio-grid-option">
            <input type="radio" name="bannerPosition" value="bottom-center">
            <div class="position-label">Bottom Center</div>
          </label>
          <label class="radio-grid-option">
            <input type="radio" name="bannerPosition" value="bottom-right">
            <div class="position-label">Bottom Right</div>
          </label>
        </div>
        <div class="button-container">
          <!-- Save button will be added here dynamically -->
        </div>
      </div>
      
      <!-- Settings Tab -->
      <div id="settings" class="tab-pane">
        <h3>Configuration Import/Export</h3>
        <div class="settings-section">
          <p>Export or import your configuration settings as JSON.</p>
          <div class="button-container">
            <button id="exportSettingsButton" class="add-url-button">Export Settings</button>
            <button id="importSettingsButton" class="add-url-button">Import Settings</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="js/popup.js"></script>
</body>
</html>